$(function () {
    var chartsData

	var ws = null ;
    var target="ws://139.159.154.104:8889/ws/ZoneStatus";
    if ('WebSocket' in window) {
        ws = new WebSocket(target);
    } else if ('MozWebSocket' in window) {
        ws = new MozWebSocket(target);
    } else {
        alert('WebSocket is not supported by this browser.');
    }
    ws.onopen = function(obj){
        console.info('open') ;
        ws.send("initWd");
		ws.send("initRy");
		ws.send("initAd");
		ws.send("initPh");
		ws.send("warning");
        getZoneStatus = setInterval(function () {
            ws.send("zone");
        },5000);
		getWarningMessage = setInterval(function () {
            ws.send("warning");
        },10000);
    } ;

    ws.onclose = function (obj) {
        console.info('close') ;
        clearInterval(getZoneStatus);
    } ;

    ws.onmessage = function(obj){
		var objData = JSON.parse(obj.data);
		console.log(objData);
		// 温度
		if( objData.lab == "initWd" ){
			var option = {
			 data:objData.data.reverse()
		 }
         chart1.series[0].update(option)
		}
		// 溶氧
		if( objData.lab == "initRy" ){
			var option = {
			 data:objData.data.reverse()
		 }
         chart2.series[0].update(option)
		}

		// 氨氮
		if( objData.lab == "initAd" ){
			var option = {
			 data:objData.data.reverse()
		 }
         chart3.series[0].update(option)
		}

		// PH值
		if( objData.lab == "initPh" ){
			var option = {
			 data:objData.data.reverse()
		 }
         chart4.series[0].update(option)
		}


		if(objData.lab == "zone"){
			chartsData = objData.data[3]
			var series = chart1.series[0],
					chart = chart1;
			activeLastPointToolip(chart);
					var x = (new Date()).getTime(), 
						y = chartsData.wd;         
					series.addPoint([x, y], true, true);
					activeLastPointToolip(chart);


			var series = chart2.series[0],
					chart = chart2;
			activeLastPointToolip(chart);
					var x = (new Date()).getTime(), 
						y = objData.data[3].ry;         
					series.addPoint([x, y], true, true);
					activeLastPointToolip(chart);

			var series = chart3.series[0],
					chart = chart3;
			activeLastPointToolip(chart);
					var x = (new Date()).getTime(), 
						y = objData.data[3].ad;         
					series.addPoint([x, y], true, true);
					activeLastPointToolip(chart);

			var series = chart4.series[0],
					chart = chart4;
			activeLastPointToolip(chart);
					var x = (new Date()).getTime(), 
						y = objData.data[3].ph;         
					series.addPoint([x, y], true, true);
					activeLastPointToolip(chart);
		}
		if(objData.lab == "warning"){
			var curData = objData.data

			var data = {
				list:curData.slice(2).reverse()
			}
			// if(curData.length > 9 ){

			// }
			var html = template('test', data);
            document.getElementById('warningMessage').innerHTML = html;
		}
        
    } ;
   function activeLastPointToolip(chart) {
	var points = chart.series[0].points;
	chart.tooltip.refresh(points[points.length -1]);
}
//温度
var chart1 = Highcharts.chart('chart_1', {
    chart: {
        type: 'spline',
        zoomType: 'x',
		// events: {
		// 	load: function () {
		// 		var series = this.series[0],
		// 			chart = this;
		// 		activeLastPointToolip(chart);
		// 		setInterval(function () {
		// 			var x = (new Date()).getTime(), // 当前时间
		// 				y = chartsData.wd;          // 随机值
		// 			series.addPoint([x, y], true, true);
		// 			activeLastPointToolip(chart);
		// 		}, 5000);
		// 	}
		// }
    },
    title: {
        text: null
    },
    xAxis: {
       type: 'datetime',
	   tickPixelInterval: 150
    },
    yAxis: {
        title: {
            text: '温度 (℃)'
        },
		plotLines:[{
            color:'red',           //线的颜色，定义为红色
            dashStyle:'solid',     //默认值，这里定义为实线
            value:30,               //定义在那个值上显示标示线
            width:2                //标示线的宽度，2px
        },{
            color:'red',           
            dashStyle:'solid',     
            value:10,               
            width:2               
        }]
    },
	tooltip: {
		formatter: function () {
			
				return '<h1 style="font-size:20px;line-height: 30px;">' + Highcharts.numberFormat(this.y, 2) + '</h1>';
		},
		// enabled:false,
	},
    legend: {
		enabled: false
	},
    plotOptions: {
        scatter: {
            marker: {
                radius: 5,
                states: {
                    hover: {
                        enabled: true,
                        lineColor: 'rgb(100,100,100)'
                    }
                }
            },
            states: {
                hover: {
                    marker: {
                        enabled: false
                    }
                }
            },
            tooltip: {
              
            }
        }
    },
    series: [{
        name: '温度',
        color: '#5C8CE1',
        data: chartsData,
		// (function () {
		// 	// 生成随机值
		// 	var data = chartsData;
		// 	console.log(data);
		// 	for (i = -60; i <= 0; i += 1) {
		// 		data.push({
		// 			x: time + i * 5000,
		// 			y: Math.random() * (15 - 10) + 10
		// 		});
		// 	}
		// 	return data;
		// }())
	}],

});

// 溶氧
var chart2 = Highcharts.chart('chart_2', {
	chart: {
		type: 'spline',
		marginRight: 10,
		 zoomType: 'x',
		events: {
			// load: function () {
			// 	var series = this.series[0],
			// 		chart = this;
			// 	activeLastPointToolip(chart);
			// 	setInterval(function () {
			// 		var x = (new Date()).getTime(), // 当前时间
			// 			y = Math.random() * (7 - 0) + 0;     
			// 		series.addPoint([x, y], true, true);
			// 		activeLastPointToolip(chart);
			// 	}, 5000);
			// }
		}
	},
	title: {
		text: null
	},
	xAxis: {
		type: 'datetime',
		tickPixelInterval: 150
	},
	yAxis: {
		title: {
			text: "溶氧 (mg/L)"
		},
        plotLines:[{
            color:'red',           //线的颜色，定义为红色
            dashStyle:'solid',     //默认值，这里定义为实线
            value:6,               //定义在那个值上显示标示线
            width:2                //标示线的宽度，2px
        },
        ]
	},
	tooltip: {
		formatter: function () {
				return '<h1 style="font-size:20px;line-height: 30px;">' + Highcharts.numberFormat(this.y, 2) + '</h1>';			
		},
		// enabled:false,
	},
	legend: {
		enabled: false
	},
	series: [{
		name: '溶氧',
		color:'#87E4FC',
		// type: 'area',
		data: [],
	}],
	
	
});
// 氨氮
var chart3 = Highcharts.chart('chart_3', {
	chart: {
		type: 'spline',
		marginRight: 10,
		zoomType: 'x',
		events: {
			// load: function () {
			// 	var series = this.series[0],
			// 		chart = this;
			// 	activeLastPointToolip(chart);
			// 	setInterval(function () {
			// 		var x = (new Date()).getTime(), // 当前时间
			// 			y = Math.random() * (0.12 - 0) + 0;     
			// 		series.addPoint([x, y], true, true);
			// 		activeLastPointToolip(chart);
			// 	}, 1000);
			// }
		}
	},
	title: {
		text: null
	},
	xAxis: {
		type: 'datetime',
		tickPixelInterval: 150
	},
	yAxis: {
		title: {
			text: "氨氮 (mg/L)"
		},
        plotLines:[{
            color:'red',           //线的颜色，定义为红色
            dashStyle:'solid',     //默认值，这里定义为实线
            value:0.1,               //定义在那个值上显示标示线
            width:2                //标示线的宽度，2px
        },
        ]
	},
	tooltip: {
		formatter: function () {
				return '<h1 style="font-size:20px;line-height: 30px;">' + Highcharts.numberFormat(this.y, 2) + '</h1>';			
		},
		// enabled:false,
	},
	legend: {
		enabled: false
	},
	series: [{
		name: '氨氮',
		data: [],
	}]
});
//PH值
var chart4 = Highcharts.chart('chart_4', {
	chart: {
		type: 'spline',
		marginRight: 10,
		zoomType: 'x',
		events: {
			// load: function () {
			// 	var series = this.series[0],
			// 		chart = this;
			// 	activeLastPointToolip(chart);
			// 	setInterval(function () {
			// 		var x = (new Date()).getTime(), // 当前时间
			// 			y =  Math.random() * (11 - 6) + 6;     
			// 		series.addPoint([x, y], true, true);
			// 		activeLastPointToolip(chart);
			// 	}, 1000);
			// }
		}
	},
	title: {
		text: null
	},
	xAxis: {
		type: 'datetime',
		tickPixelInterval: 150
	},
	yAxis: {
		title: {
			text: "PH值 "
		},
        plotLines:[{
            color:'red',           //线的颜色，定义为红色
            dashStyle:'solid',     //默认值，这里定义为实线
            value:8.6,               //定义在那个值上显示标示线
            width:2                //标示线的宽度，2px
        },
		{
            color:'red',           
            dashStyle:'solid',     
            value:7.8,               
            width:2                
        },
        ]
	},
	tooltip: {
		formatter: function () {
				return '<h1 style="font-size:20px;line-height: 30px;">' + Highcharts.numberFormat(this.y, 2) + '</h1>';			
		},
		// enabled:false,
	},
	legend: {
		enabled: false
	},
	series: [{
		name: 'PH值',
		color:'#9EFF7E',
		data: []
		// (function () {
			
		// 	var data = [],
		// 		time = (new Date()).getTime(),
		// 		i;
		// 	for (i = -10; i <= 0; i += 1) {
		// 		data.push({
		// 			x: time + i * 1000,
		// 			y: Math.random() * (11 - 6) + 6
		// 		});
                
		// 	}
		// 	return data;
		// }())
	}]
});

template.helper('dateFormat', function (date, format) {
	// console.log(new Date(parseInt(date)));
	// console.log(format);		
	// 		return new Date(parseInt(date));


			date = new Date(parseInt(date));
 
			var map = {
				"M": date.getMonth() + 1, //月份 
				"d": date.getDate(), //日 
				"h": date.getHours(), //小时 
				"m": date.getMinutes(), //分 
				"s": date.getSeconds(), //秒 
				"q": Math.floor((date.getMonth() + 3) / 3), //季度 
				"S": date.getMilliseconds() //毫秒 
			};
			format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
				var v = map[t];
				if (v !== undefined) {
					if (all.length > 1) {
						v = '0' + v;
						v = v.substr(v.length - 2);
					}
					return v;
				} else if (t === 'y') {
					return (date.getFullYear() + '').substr(4 - all.length);
				}
				return all;
			});
			return format;
		});

});



